<template>
    <div>
        <div class="searchInput">
            <div class="kuang">
                <div>
                    用户 ID： <el-input v-model="searchUserId" placeholder="请输入用户ID"></el-input>&emsp;&emsp13;
                </div>
                <div>
                    手机号： <el-input v-model="searchPhoneNumber" placeholder="请输入手机号"></el-input>&emsp;&emsp13;
                </div>
                <div>
                    状态：   <el-select v-model="searchState" placeholder="请选择">
                                    <el-option
                                    v-for="item in stateOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
            </div>
        </div>
        <div class="btns">
            <el-button class="chaxun">查询</el-button>
            <el-button class="reset">重置</el-button>
        </div>
        </div>
        <!-- 数据 -->
        <el-table
            :header-cell-style="{background:'#e8efff',color:'#000000'}"
            :data="tableData"
            :loading="loading"
            style="width: 100%">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column prop="order" label="序号" width="60">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.order }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="number" label="用户ID">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        <div class="block">
                            <img src="" alt="">
                            <span>{{ scope.row.userId }}</span>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="手机号">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.phone }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="charge_count" label="总充电次数">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.charge_count }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="degrees" label="总充电度数">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.degrees }}KW.h
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="total_fee" label="总充电费用">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.total_fee }}元
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="charge_fee" label="充值金额">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.charge_fee }}元
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="remain" label="账号余额">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.remain }}元
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="状态">
                <template v-slot="scope">
                    <div>
                        <el-switch
                            v-model="scope.row.state"
                            @change="changeState"
                            disabled
                            @click.native="changeIsNeedCaptcha(isNeedCaptcha)"
                            active-color="#165BFF"
                            inactive-color="#D9D9D9">
                        </el-switch>
                    </div>
                </template>
               
            </el-table-column>
            <el-table-column prop="created_time" label="创建时间">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.created_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template v-slot="scope">
                    <div class="scope" style="color:#949BBE;">
                        <span class="detailBtn" @click="goDetail(scope.row.id)">详情</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <Pagination />
    </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'
    export default {
        name: 'switch-test',
        components:{
            Pagination
        },
        // computed: {
        //     telephone(){
        //         this.tableData.map((v, i) => {
        //             const a = v.phone.slice(3)
        //             const b = v.phone.slice(-3)
        //         })
        //         return 
        //     }
        // },
        created() {
            this.tableData.map((v, i) => {
                    const a = v.phone.slice(3)
                    const b = v.phone.slice(-4)
                    v.phone = a + '****' + b
                })
        },
        data() {
            return {
                isNeedCaptcha: false,
                loading:true,
                searchState:'',
                searchUserId:'',
                searchPhoneNumber:'',
                stateOptions: [
                            {
                            value: null,
                            label: '请选择'
                            }, 
                            {
                            value: 1,
                            label: '启用'
                            }, 
                            {
                            value: 0,
                            label: '禁用'
                            }, 
                            ],
                tableData: [
                    {
                        order: '1',
                        userId: '姜子鱼',
                        phone: '15966663765',
                        charge_count: 2,
                        degrees: 32,
                        total_fee: 50,
                        charge_fee: 200,
                        remain: 150,
                        state:0,
                        created_time:'2023.01.05',
                        id:1
                    },
                    {
                        order: '2',
                        userId: '姜子鱼',
                        phone: '1226663332',
                        charge_count: 2,
                        degrees: 32,
                        total_fee: 50,
                        charge_fee: 200,
                        remain: 150,
                        state:0,
                        created_time:'2023.03.03',
                        id:2
                    },
                    {
                        order: '3',
                        userId: '姜子鱼',
                        phone: '18666663765',
                        charge_count: 2,
                        degrees: 32,
                        total_fee: 50,
                        charge_fee: 200,
                        remain: 150,
                        state:0,
                        created_time:'2023.01.04',
                        id:3
                    },
                ]
                }
        },
        methods: {
            // 开关提示
            async changeIsNeedCaptcha (value) {
                this.$confirm(`此操作将${!value ? '开启' : '关闭'}验证, 是否继续？`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(async () => {
                    this.isNeedCaptcha = !value
                }).catch(() => {
                    this.$message.error('取消操作')
                })
            },
            changeState(){

            },
            goDetail(id){
                this.$router.push({
                    path:'/UserDetail',
                    query:{
                        id,
                        detail:"inquire" // 查询
                    }
                })
            },
        }
    }
</script>

<style lang="less" scoped>
.searchInput{
    text-align: left;
    font-size: 14px;
    height: 25.97px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666 !important;
}
.el-input{
    width: 280px;
    height: 35.98px;
    font-size: 11.97px;
    color: #666666;
    background: #F0F1F6;
}
.el-input__inner{
  background-color: #F0F1F6;  
  background-color: pink !important;  
}
.el-select{
    width: 90px;
    height: 35.98px;
}
.kuang{
    float: left;
}
.btns{
    float: right;
}
.el-button{
    background: transparent;
    border: none;
}
.chaxun{
    background: #165BFF;
    color: white;
}
.reset{
    background: #F0F1F6;
    color: #666666;
}

::v-deep .el-table th > .cell {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}
.editBtn{
    display: inline-block;
    margin-right: 7.98px;
    color: #09D796;
    cursor: pointer;
}
.detailBtn{
    margin-right: 7.98px;
    display: inline-block;
    color: #165BFF;
    cursor: pointer;
}
.deleteBtn{
    display: inline-block;
    color: #FA698D;
    cursor: pointer;
}
.confirmButtonClass{
    background: #165bff;
}
#dialog .el-dialog__header {
    padding: 20.02px 20.02px 0px;
    background: #165BFF;
    text-align: left;
    font-weight: bold;
}
#dialog .el-dialog__body{
    height: 188.02px;
}
.kuang>div{
    margin: 4.97px auto;
    display: inline-block;
}
.el-table{
    margin-top: 50px;
}
.block img{
    width: 14px;
    height: 14px;
    border-radius: 14px;
    vertical-align: middle;
}
</style>